<!--

=========================================================
* Pixel Pro Bootstrap 4 UI Kit
=========================================================

* Product Page: https://themesberg.com/product/ui-kits/pixel-pro-premium-bootstrap-4-ui-kit
* Copyright 2019 Themesberg (https://www.themesberg.com)

* Coded by https://themesberg.com

=========================================================

* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

-->
<!DOCTYPE html>
<html lang="en">

<head>
    @@include('./_head.html', {
        "path": "../..",
        "title": "Pixel Documentation - Color scheme"
    })
</head>

<body>
    <a href="#doc-index" class="btn btn-lg btn-primary btn-block rounded-0 d-lg-none" data-toggle="collapse" data-target="#doc-index" aria-expanded="false" aria-controls="doc-index">
        <svg class="icon fill-white" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M3 17C3 17.5523 3.44772 18 4 18H20C20.5523 18 21 17.5523 21 17V17C21 16.4477 20.5523 16 20 16H4C3.44772 16 3 16.4477 3 17V17ZM3 12C3 12.5523 3.44772 13 4 13H20C20.5523 13 21 12.5523 21 12V12C21 11.4477 20.5523 11 20 11H4C3.44772 11 3 11.4477 3 12V12ZM4 6C3.44772 6 3 6.44772 3 7V7C3 7.55228 3.44772 8 4 8H20C20.5523 8 21 7.55228 21 7V7C21 6.44772 20.5523 6 20 6H4Z" />
        </svg>
        <span class="h6 text-white">Menu</span>
    </a>
    <section class="container-fluid py-4">
        <div class="row">
            @@include('./_docs-sidebar.html', {
                "path": "../..",
                "docs-path": ".."
            })
            <!-- Content -->
            <div class="col-12 col-lg-10">
                <div class="row">
                    <div class="col-xl-10 col-lg-9 px-xl-5 px-lg-3 px-md-3 py-md-5">
                        <div class="border-bottom">
                            <h1>How to edit color scheme</h1>
                            <p class="lead text-dark">Changing Pixel's color scheme is incredibily easy. Because our Sass is heavily built on variables and mixins you can change the whole color scheme with only 3 lines.</p>
                        </div>
                        <div id="color-scheme" class="my-5">
                            <h5 class="mb-3">Color scheme</h5>
                            <p>Go to the <code class="text-danger">scss/pixel/_variables.scss</code> file and search for the following variables:</p>
                            <pre class="bg-primary"><code class="language-css">
$primary:       #174f84;
$secondary:     #10ab7c;
$tertiary:      #FF7F66;</code>
                            </pre>
                            <p>Change the hex color for each variable to the color palette that you desire.</p>
                        </div>
                        <div id="shades-of-grey" class="my-5">
                            <h5 class="mb-3">Shades of grey</h5>
                            <p>If you don't fancy our 11 shades of grey you can change them in <code class="text-danger">scss/pixel/_variables.scss</code>. Search for the following variables in the file:</p>
                            <pre class="bg-primary"><code class="language-css">
$white:    #ffffff;
$gray-100: #f6f9fc;
$gray-200: #e9ecef;
$gray-300: #dde1ed;
$gray-400: #ced4da;
$gray-500: #adb5bd;
$gray-600: #999999;   
$gray-700: #777777;   
$gray-800: #77838f;   
$gray-900: #3e4555;
$black:    #111111;</code>
                            </pre>
                            <div id="error-success" class="my-5">
                                <h5 class="mb-3">Error, success and info colors</h5>
                                <p>We use Bootstrap's default variable naming conventions and we recommend changing them in <code class="text-danger">scss/pixel/_variables.scss</code>:</p>
                                <pre class="bg-primary"><code class="language-css">$success:       $green;
$info:          $teal;
$warning:       $yellow;
$danger:        $red;</code>
</pre>
                                <p>Changing these variables will update the colors of all class modifiers that use
                                    <code class="text-danger">*-success, *-danger</code> (eg. <code class="text-danger">.text-danger</code>).</p>
                            </div>
                            <div id="dark-light" class="my-5">
                                <h5 class="mb-3">Dark, light, soft and gray</h5>
                                <p>Search for the following variables in the <code class="text-danger">scss/pixel/_variables.scss</code> file:
                                </p>
                                <pre class="bg-primary"><code class="language-css">$gray:          $gray-500;
$light:         $gray-300;
$dark:          $gray-900;
$soft:          $gray-100;</code>
</pre>
                                <p>Changing these variables will update the colors of all class modifiers that use
                                    <code class="text-danger">*-light, *-dark</code> (eg. <code class="text-danger">.bg-light</code>).</p>
                            </div>
                        </div>
                    </div>
                    <div class="col-xl-2 col-lg-3 d-none d-lg-block py-md-1 doc-sidebar border-left">
                        <ul class="nav flex-column">
                            <li class="nav-item">
                                <a href="#color-scheme" class="nav-link " data-smooth-scroll>Color scheme</a>
                            </li>
                            <li class="nav-item">
                                <a href="#shades-of-grey" class="nav-link " data-smooth-scroll>Shades of Grey</a>
                            </li>
                            <li class="nav-item">
                                <a href="#error-success" class="nav-link " data-smooth-scroll>Error, Success & Info</a>
                            </li>
                            <li class="nav-item">
                                <a href="#dark-light" class="nav-link " data-smooth-scroll>Dark & Light</a>
                            </li>
                        </ul>
                    </div>
                </div>
                <!-- End of content -->
            </div>
        </div>
    </section>
    @@include('./_scripts.html', {
        "path": "../.."
    })
</body>

</html>